<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
  <caption>个人信息</caption>
  <tr>
    <td>照片</td><td id="pic_td"></td>
  </tr>
  <tr>
    <td>姓名</td><td id="name_td"></td>
  </tr>
  <tr>
    <td>年龄</td><td id="age_td"></td>
  </tr>
  <tr>
    <td>好友</td><td id="friends_td"></td>
  </tr>
</table>
<button onclick="load()">加载数据</button>
<script>
  function load() {
    let p1 = {};/*实例化一个空对象*/
    /*JavaScript语言可以动态的给对象添加属性或者方法 直接对象点属性名或者方法名*/
    p1.name = "坤坤";
    p1.age = 21;
    p1.run = function () {
      console.log(this.name+":"+this.age);
    }
    p1.run();/*调用对象的方法*/
    // console.log(p1);

    /*实例化一个自带属性和方法的对象*/
    let p2 = {
      name:"李四",age:18,/*赋值直接属性名冒号加值 各个属性之间用英文逗号隔开*/
      run:function () {/*方法名如上*/
        console.log(this.name+":"+this.age);
      }
    }
    p2.run();
  }
</script>
</body>
</html>